<template>
  <div v-move class="node-wrap" :style="{ transform: 'scale(' + scale / 100 + ')' }">
    <NodeItem :node="flowTree" />
    <div class="end-node">
      <div class="end-node-circle"></div>
      <div class="end-node-text">流程结束</div>
    </div>
  </div>
  <div class="float-bar">
    当前缩放：{{ scale }}% <a v-if="scale != 100" @click="restore">还原</a>
  </div>
</template>

<script setup lang="ts">
import type { NodeItem } from '../types'
import * as utils from '../FlowPanel'
const { flowTree } = inject<{ flowTree: NodeItem }>('flowTree', {
  flowTree: utils.initFlow()
})
const scale = ref<number>(100)
// 还原
const restore = () => {
  scale.value = 100
}
// 放大
const zoomIn = () => {
  if (scale.value < 150) {
    scale.value += 1
  }
}
// 缩小
const zoomOut = () => {
  if (scale.value > 50) {
    scale.value -= 1
  }
}
// 框选区域
const vMove = {
  mounted: (el: HTMLElement) => {
    el.onmousedown = (e: MouseEvent) => {
      const disx = e.pageX - el.offsetLeft
      const disy = e.pageY - el.offsetTop
      document.onmousemove = (e: MouseEvent) => {
        let X = e.pageX - disx
        let Y = e.pageY - disy
        el.style.left = X + 'px'
        el.style.top = Y + 'px'
        e.preventDefault()
        e.stopPropagation()
      }
      document.onmouseup = (e: MouseEvent) => {
        document.onmousemove = document.onmouseup = null
        e.preventDefault()
        e.stopPropagation()
      }
      e.preventDefault()
      e.stopPropagation()
    }
    el.onwheel = (e: WheelEvent) => {
      if (e.deltaY) {
        // 判断浏览器IE，谷歌滑轮事件
        if (e.deltaY > 0) {
          // 当滑轮向上滚动时
          zoomIn()
        }
        if (e.deltaY < 0) {
          // 当滑轮向下滚动时
          zoomOut()
        }
      } else if (e.detail) {
        // Firefox滑轮事件
        if (e.detail > 0) {
          // 当滑轮向上滚动时
          zoomIn()
        }
        if (e.detail < 0) {
          // 当滑轮向下滚动时
          zoomOut()
        }
      }
    }
  }
}
</script>
